/**
 * 应用主导航组件
 * 包含底部标签导航和堆栈导航的配置
 * 实现了学习、排行榜、个人资料三个主要模块的导航
 */
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { Ionicons } from '@expo/vector-icons';
import { Platform } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

// 导入各个页面组件
import HomeScreen from '../screens/HomeScreen';
import LessonScreen from '../screens/LessonScreen';
import ProfileScreen from '../screens/ProfileScreen';
import LeaderboardScreen from '../screens/LeaderboardScreen';

// 创建导航器实例
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

/**
 * 主页堆栈导航器
 * 包含主页和课程页面的导航结构
 * 实现了从课程列表到具体课程的跳转
 */
function HomeStack() {
  return (
    <Stack.Navigator
      screenListeners={({ navigation, route }) => ({
        // 在课程页面隐藏Tab Bar
        focus: () => {
          if (route.name === 'Lesson') {
            navigation.getParent()?.setOptions({
              tabBarStyle: { display: 'none' }
            });
          } else {
            navigation.getParent()?.setOptions({
              tabBarStyle: {
                backgroundColor: '#fff',
                borderTopWidth: 1,
                borderTopColor: '#e0e0e0',
                height: Platform.OS === 'android' ? 65 : 85,
                paddingBottom: Platform.OS === 'android' ? 8 : 25,
                paddingTop: 8,
              }
            });
          }
        }
      })}
    >
      {/* 主页面 - 不显示头部导航栏 */}
      <Stack.Screen 
        name="Home" 
        component={HomeScreen} 
        options={{ headerShown: false }}
      />
      {/* 课程学习页面 - 隐藏Tab Bar，参考多邻国设计 */}
      <Stack.Screen 
        name="Lesson" 
        component={LessonScreen} 
        options={({ route }) => ({ 
          title: route.params?.lessonTitle || '课程学习',
          headerShown: false, // 隐藏顶部导航栏，使用自定义header
        })}
      />
    </Stack.Navigator>
  );
}

/**
 * 主标签导航器
 * 配置底部标签栏，包含学习、排行榜、个人资料三个模块
 * 使用中文标签和多邻国风格的绿色主题
 * 回复稳定的固定布局，避免变形问题
 */
function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        // 根据路由名称返回对应的图标
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'HomeStack') {
            iconName = focused ? 'home' : 'home-outline'; // 主页图标
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline'; // 个人资料图标
          } else if (route.name === 'Leaderboard') {
            iconName = focused ? 'trophy' : 'trophy-outline'; // 排行榜图标
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        // 标签栏样式配置 - 优化安全区域处理
        tabBarActiveTintColor: '#58CC02', // 激活状态的绿色
        tabBarInactiveTintColor: 'gray', // 非激活状态的灰色
        tabBarStyle: {
          backgroundColor: '#fff', // 白色背景
          borderTopWidth: 1, // 上边框
          borderTopColor: '#e0e0e0', // 边框颜色
          height: Platform.OS === 'android' ? 65 : 85, // 适配不同平台
          paddingBottom: Platform.OS === 'android' ? 8 : 25, // 底部内边距
          paddingTop: 8, // 顶部内边距
        },
        headerShown: false // 隐藏顶部导航栏
      })}
    >
      {/* 学习模块（包含主页和课程页面） */}
      <Tab.Screen 
        name="HomeStack" 
        component={HomeStack} 
        options={{ title: '学习' }} // 中文标签
      />
      {/* 排行榜模块 */}
      <Tab.Screen 
        name="Leaderboard" 
        component={LeaderboardScreen} 
        options={{ title: '排行榜' }} // 中文标签
      />
      {/* 个人资料模块 */}
      <Tab.Screen 
        name="Profile" 
        component={ProfileScreen} 
        options={{ title: '我的' }} // 中文标签
      />
    </Tab.Navigator>
  );
}

/**
 * 主应用导航器
 * 整个应用的根导航组件，包含 NavigationContainer 和所有子导航器
 * 作为应用的导航入口点，管理整个应用的导航状态
 * 使用简单稳定的导航结构，避免复杂的状态管理
 */
export default function AppNavigator() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <TabNavigator />
      </NavigationContainer>
    </SafeAreaProvider>
  );
}